<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>南华严选</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@3/lib/index.css"/>
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />

    <style>
        html{
            font-size: 10px;
        }
        body{
            font-size: 1.4rem;
        }
        html, body{
            width: 100%;
            height: 100%;
        }
        .van-row{
            padding: 2rem 4%;
            background: #333;
            color: #fff;
        }
        .van-row .van-col{
            line-height: 8rem;
            font-size:1.8rem;
        }
        .van-col img{
            width: 8rem;
            border-radius: 50%;
            display: block;
        }

        .van-grid-item{
            height: 12rem;
        }

        .login_model{
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            z-index: 10;
        }
        .login_model section{
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.5);
        }
        .login_model .login_form{
            width: 90%;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            padding: 1rem;
            box-sizing: border-box;
            background: #fff;
        }
    </style>
</head>
<body>

    <div id="app">

        <!--头部点击登录利用24栅格系统{头像、登录按钮、箭头}-->
        <van-row>
            <van-col span="7">
                <img :src="pics" alt="">
            </van-col>
            <van-col span="16" @click="changeFlag" v-model="nickname">{{nickname}}</van-col>
            <van-col span="1"><van-icon name="arrow" /></van-col>
        </van-row>

        <!--宫格部分 -->
        <van-grid :column-num="3">
            <van-grid-item icon="label-o" text="我的订单"></van-grid-item>
            <van-grid-item icon="label-o" text="我的订单"></van-grid-item>
            <van-grid-item icon="label-o" text="我的订单"></van-grid-item>
            <van-grid-item icon="label-o" text="我的订单"></van-grid-item>
            <van-grid-item icon="label-o" text="我的订单"></van-grid-item>
            <van-grid-item icon="label-o" text="我的订单"></van-grid-item>
            <van-grid-item icon="label-o" text="我的订单"></van-grid-item>
            <van-grid-item icon="label-o" text="我的订单"></van-grid-item>
            <van-grid-item icon="label-o" text="我的订单"></van-grid-item>
            <van-grid-item icon="label-o" text="我的订单"></van-grid-item>
        </van-grid>

        <!--登录部分-->
        <div class="login_model"  v-if="flag">
            <section @click="changeFlag"></section>
            <van-form class="login_form">
                <van-cell-group inset>
                    <van-field
                            v-model="username"
                            name="用户名"
                            label="用户名"
                            placeholder="用户名"
                            :rules="[{ required: true, message: '请填写用户名' }]"
                    ></van-field>
                    <van-field
                            v-model="password"
                            type="password"
                            name="密码"
                            label="密码"
                            placeholder="密码"
                            :rules="[{ required: true, message: '请填写密码' }]"
                    ></van-field>
                </van-cell-group>
                <div style="margin: 16px;">
                    <van-button round block type="primary" native-type="submit" @click="login">
                        登录
                    </van-button>
                </div>
            </van-form>
        </div>


        <!--底部标签栏-->
        <van-tabbar v-model="active" active-color="#ee0a24" inactive-color="#000">
            <van-tabbar-item icon="home-o" url="index.html">主页</van-tabbar-item>
            <van-tabbar-item icon="search">搜索</van-tabbar-item>
            <van-tabbar-item icon="friends-o">群组</van-tabbar-item>
            <van-tabbar-item icon="shopping-cart-o">购物车</van-tabbar-item>
            <van-tabbar-item icon="setting-o">设置</van-tabbar-item>
        </van-tabbar>
    </div>

    <!--引入vue和vant的JS文件-->
    <script src="https://cdn.jsdelivr.net/npm/vue@3"></script>
    <script src="https://cdn.jsdelivr.net/npm/vant@3/lib/vant.min.js"></script>
    <script src="js/axios.min.js"></script>
    <!--创建Vue实例-->
    <script>
        // 在 #app 标签下渲染一个按钮组件
        var vue = Vue.createApp({
            data(){
                return {
                    active: 4,
                    username: '',
                    password: '',
                    flag: false,
                    nickname: '点击登录',
                    pics: 'images/channer5.png'
                }
            },
            methods: {
                changeFlag(){
                    this.flag = !this.flag;
                },
                login(){
                    axios.get("userServlet",{
                        params: {
                            op: 'login',
                            username: this.username,
                            password: this.password
                        }
                    }).then(resp=>{
                        if (resp.data == -1) {
                            alert("注册失败");
                        }else if (resp.data == -2){
                            alert("密码输入错误");
                        }else {
                            this.flag = !this.flag;
                            this.nickname = resp.data;
                            this.pics = 'images/channer3.png';
                        }
                    });
                }
            }
        });
        vue.use(vant);
        vue.mount('#app');

        // 通过 CDN 引入时不会自动注册 Lazyload 组件
        // 可以通过下面的方式手动注册
        vue.use(vant.Lazyload);


    </script>
</body>
</html>